<!DOCTYPE html>
<jsp:useBean id="mediaTagManager" scope="application" class="org.languageguide.media.MediaTagManager" />
<html>
<head>
<%
	//String id = request.getParameter("id");
        String id = request.getParameter("id");
        String targetLanguage = request.getParameter("target");	
        String language = request.getParameter("lang");	
        org.languageguide.media.Config configuration = org.languageguide.media.MediaTagManager.getConfig(request);
		org.languageguide.readings.PublishedReading reading = new org.languageguide.readings.PublishedReading(id, targetLanguage);
	String[] tags = mediaTagManager.getIR3(configuration, reading.getSoundFile());
%>
<title><%= reading.getTitle() %></title>
<meta name="viewport" content="initial-scale = 1.0, user-scalable = no">
<meta name="apple-mobile-web-app-capable" content="yes">

<% if (!configuration.isMobile()){ %>
<link href="/reading/styles/docs.css" rel="stylesheet" type="text/css">
<% }else{ %>
<link href="/reading/styles/docs_mobile.css" rel="stylesheet" type="text/css">
<% } %>
<script type="text/javascript">
	var id = <%= id %>;
	var hasWordGranularity = <%= reading.hasWordGranularity() %>;
	var times = [<%= reading.getTimes() %>];
	var imageTimes = [<%= reading.getImageTimes() %>];
	var hasImages = true;	
</script>

<style>
body {margin: 0; padding: 0;}
#width {width: 100%;}
#content {position: absolute; top: 50px; left: 0; right: 0; bottom: 0px; overflow: scroll; -webkit-overflow-scrolling: touch; padding: 10px; 

transition-property: visibility;  
  transition-duration: .1s; 
  transition-timing-function: ease-out;  
  -webkit-transition-property: opacity;  
  -webkit-transition-duration: .1s; 

}
p {margin-bottom: 20px;}
#header {background: #CCC; height: 50px; position: fixed; top: 0px; width: 100%;}

#image{
	display:none;
	 position: fixed;
	  top: 50%;
	  left: 50%;
}
audio {
	   width: 180px;
   }
  

</style>

<meta charset="utf-8">
</head>

<body>
<div id="width">
<div id="header" class="noBounce"><table width="600" border="0" align="center">
                <tr>
                  <td width="180"><!-- <input type="checkbox" id="visibility" onChange="toggleVisibility()" value="off">
            <u>H</u>ide text    -->
                    <a href="/reading/docs/instructions.html" target="_blank">Instructions</a><br>
                    <input type="checkbox" name="second" value="1" onClick="hideTextChange(this)">hide text when playing</td>
                  <td align="center"><%@ include file="/reading/reading_button_english.jsp" %></td>
                  <td width="180"><%= tags[1] %></td>
                </tr>
  </table></div>

<div id="content">
<%= reading.getText() %>  
</div>

<!--p<div id="footer" class="noBounce">footer stuff</div>-->
</div>
<div id="image"></div>

<script type="text/javascript" src="/reading/scrollfix.js"></script>
<%=  tags[0] %>
<script type="text/javascript">

//Prevent Header & Footer From Showing Browser Chrome

document.addEventListener('touchmove', function(event) {
   if(event.target.parentNode.className.indexOf('noBounce') != -1 || event.target.className.indexOf('noBounce') != -1 ) {
	event.preventDefault(); }
}, false);

// Add ScrollFix
var scrollingContent = document.getElementById("content");
new ScrollFix(scrollingContent);

</script>
</body>
</html>